<template>
  <div class="role-container">

    <el-card shadow="never" class="input-card">
      <div class="select-input">
        角色名:  <el-input label="角色名" clearable placeholder="角色名"  v-model="roleName"
                  class="roleName" @input="this.handleQuery"></el-input>
        角色代号:  <el-input label="角色代号" clearable placeholder="角色代号"  v-model="roleCode"
                           class="roleName" @input="this.handleQuery"></el-input>
        <el-button type="primary" class="role-select-button" icon="el-icon-search" @click="handleQuery">查询</el-button>
      </div>
    </el-card>
    <!--  角色管理的卡片-->
    <el-card class="container Table-page" shadow="never">

      <!--      添加和批量删除的盒子-->
      <div class="role-button-box">
        <el-button type="primary" size="mini" @click="handleAddRole(null)">+添加</el-button>
        <el-button type="danger" size="mini" @click="handleDeleteRole('批量',null)">批量删除</el-button>
      </div>
      <!--    表格-->
      <el-table :data="roleData" style="width: 100%" stripe border :fit="true" highlight-selection-row
                @selection-change="handleSelectionChange" v-loading="loading">
        <el-table-column type="selection" width="55" align="center" fixed
                         :selectable="selectionCheck"></el-table-column>
        <el-table-column prop="id" label="id" align="center" width="200px"></el-table-column>
        <el-table-column prop="roleName" label="角色名" align="center"></el-table-column>
        <el-table-column prop="roleCode" label="角色代号" align="center"></el-table-column>
        <el-table-column prop="roleLevel" label="角色等级" align="center">
          <template v-slot="scope">
            {{ roleLevelMap[scope.row.roleLevel] }}
          </template>
        </el-table-column>
        <el-table-column prop="menuString" label="角色菜单" align="center" min-width="250px"></el-table-column>
        <el-table-column prop="createUserName" label="创建人" align="center" width="100px"></el-table-column>
        <el-table-column prop="updateTime" label="修改时间" align="center" width="150px"></el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="scope">
            <el-button type="text" size="mini" v-show="buttonShowCheck(scope.row)" @click="handleAddRole(scope.row.id)">
              编辑
            </el-button>
            <el-button type="text" size="mini" @click="handleAssignMenu(scope.row.id)">分配菜单</el-button>
            <el-button type="text" size="mini" style="color: red" @click="handleDeleteRole('one',scope.row.id)"
                       v-show="buttonShowCheck(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页组件-->
      <el-pagination :page-sizes="[5, 10, 20,50,100]"
                     :page-size="this.pageSize"
                     :current-page="this.page"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="this.counts"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange">
      </el-pagination>
    </el-card>
    <!--    添加角色-->
    <AddRole></AddRole>
    <!--    分配菜单-->
    <AssignMenu></AssignMenu>
    <!--    添加其他组件-->
  </div>
</template>
<script>
import { axios } from 'axios'
import { DeleteRolesApi, GetRolePageApi } from '@/request/role/role-api'
import store from '@/store'
import AddRole from '@/components/role/AddRole.vue'
import AssignMenu from '@/components/role/AssignMenu.vue'

export default {
  components: {
    AssignMenu,
    AddRole
  },
  data () {
    return {
      roleName: '',
      roleCode:'',
      pageSize: 10,
      page: 0,
      counts: 0,
      roleLevelMap: ['普通用户', '普通管理员', '超级管理员'],
      roleData: [],    //角色数据
      checkList: [],    //多选内容
      loading: true
    }
  },
  created () {
    //页面渲染就执行
    this.init()
  },
  methods: {

    //初始化页面
    async init () {
      //初始化分页查询的参数
      this.loading = true
      const params = {
        page: this.page,
        pageSize: this.pageSize,
        roleName: this.roleName ? this.roleName : undefined,
        roleCode: this.roleCode ? this.roleCode : undefined
      }
      let res = await GetRolePageApi(params)   //异步发送axios请求，分页查询role
      if (res.code === 200) {
        this.roleData = res.data.records || []
        this.counts = res.data.total
        this.loading = false
      } else {
        this.$message.error(res.msg)
        this.loading = false
      }
    },
    //限制全选
    selectionCheck (row) {
      return row.roleCode !== 'super' && row.roleCode !== 'common' && row.roleCode !== 'admin'
    },
    // 限制显示
    buttonShowCheck (row) {
      return !(row.roleCode === 'super' || row.roleCode === 'common' || row.roleCode === 'admin')
    },
    //拦截查询
    handleQuery () {
      this.page = 1
      this.init()
    },
    //删除处理
    handleDeleteRole (type, id) {
      if (type === '批量' && id === null) {
        if (this.checkList.length === 0) {
          return this.$notify.warning({
            title: '警告',
            message: '请选择删除内容！'
          })
        }
      }
      //重新提示是否删除
      this.$confirm('确认删除角色，是否继续？', '确认删除', {
        'confirmButtonText': '确定',
        'cancelButtonText': '取消',
        'type': 'warning'
      }).then(async () => {
        //确认是单删还是批量删除
        let ids = (type === '批量') ? this.checkList.join(',') : id
        let res = await DeleteRolesApi(ids)
        if (res.code === 200) {
          //删除成功后的逻辑
          this.handleQuery()
          this.$message.success('删除成功！')
        } else {
          this.$message.error(res.msg)
        }
      }).catch((e) => {
        if (e === 'cancel') {
          this.$message.info('取消删除')
        } else {
          this.$message.error('未知错误！')
        }
      })

    },
    //处理编辑和新增
    handleAddRole (id) {
      store.commit('roleEditData/changeIsVisible', true)
      store.commit('roleEditData/changeEditRoleId', id)
    },
    //处理分配菜单
    handleAssignMenu (id) {
      store.commit('roleMenu/changeIsVisible', true)
      store.commit('roleMenu/changeRoleMenuId', id)
    },
    //处理pageSize变化
    handleSizeChange (val) {
      this.pageSize = val
      this.init()
    },
    //处理page变化
    handleCurrentChange (val) {
      this.page = val
      this.init()
    },
    //处理多选
    handleSelectionChange (val) {
      let checkArr = []
      val.forEach((n) => {
        checkArr.push(n.id)
      })
      this.checkList = checkArr
    },
  }
}
</script>
<style lang="less" scoped>
.role-container {
  .input-card {
    margin-bottom: 10px;
    .roleName {
      width: 200px;
      margin-right: 20px;
    }
    .select-input{
      font-size: 14px;
    }
  }
  .container {
    .role-button-box {
      float: right;
      margin: 10px 0 10px 10px;
    }

    .el-pagination {
      text-align: center;
      margin: 15px;
    }
  }
}
</style>
